<template>
    <view class="page-wrapper" style="background: #FFFFFF;">
        <view class="message-list">
            <up-empty mode="message" :text="$t('pages.machine_log.noFeedLog')" v-if="dataList.length == 0"></up-empty>
            <up-swipe-action :atuoClose="true">
                <up-swipe-action-item v-for="item in dataList" :key="item.id" @click="removeMsg" :options="options"
                    :name="item.id">
                    <view class="message-item shadow-border">
                        <image class="icon" :src="deviceImg" mode="aspectFit"></image>
                        <view class="info-box">
                            <text>{{ item.imei }}&emsp;({{ item.type == 1 ? $t('pages.machine_log.automatic') : $t('pages.machine_log.manual') }})</text>
                            <view class="desc">
                                <text style="color: #6B7280;">{{ $t('pages.machine_log.latestNews') }}：</text> 
                                <text class="theme-text">{{ $t('pages.machine_log.feed') }}&nbsp;{{ item.fenshu }}&nbsp;{{ $t('common.feedUnit') }}</text> 
                            </view>
                            <text class="desc">{{ item.datetime }}</text>
                        </view>
                    </view>
                </up-swipe-action-item>
            </up-swipe-action>
            
        </view>
        <up-modal
            :title="$t('pages.machine_log.remove_title')"
			:content="$t('pages.machine_log.remove_desc')"
			:show="confirmRemove"
			showCancelButton
            :confirmText="$t('common.confirm')"
            :cancelText="$t('common.cancel')"
            confirmColor="#CC0000"
			closeOnClickOverlay
			@confirm="confirmDelete"
			@cancel="cancelDelete"
		></up-modal>
    </view>
</template>

<script setup>
import {
    getwsjiluListAPi,
    delwsjiluApi
} from "@/api/request";
import { onLoad, } from '@dcloudio/uni-app';
import { CacheUtils, } from '@/utils/index';
import { ref, } from 'vue';
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const options = ref([{
    text: t('common.delete'),
    icon: 'trash-fill',
    style: {
        height: "90rpx",
        backgroundColor: "#f56c6c",
        fontSize: "26rpx",        
    },
},])
const dataList = ref([]);
const deviceId = ref('');
const confirmRemove = ref(false);
const activeId = ref('');
const deviceImg = ref('');

const getMessageList = async () => {
    let query = {
        userid: CacheUtils.get('userid'),
        imei: deviceId.value,
    }

    let res = await getwsjiluListAPi(query);
    if (res.response.result == true) {
        dataList.value = res.list
    } else {
        dataList.value = []
    }
}

const removeMsg = (event) => {
    activeId.value = event.name;
    confirmRemove.value = true;
}

const cancelDelete = () => {
    activeId.value = '';
    confirmRemove.value = false;
}
const confirmDelete = async () => {
    let res = await delwsjiluApi(activeId.value)
    if (res.response.result == true) {        
        cancelDelete()
        getMessageList()
    } else {
        uni.showToast({
            title: res.response.msg,
            icon: 'none'
        })
    }
}

onLoad((query) => {
    deviceId.value = query.imei;
	deviceImg.value =  decodeURIComponent( query.img );
    getMessageList();
});
</script>

<style lang="scss" scoped>
.message-list {
    padding: 10rpx 40rpx;
    background-color: #FFFFFF;

    .message-item {
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
        column-gap: 20rpx;
        background-color: #FFFFFF;
        overflow: auto;
        border-radius: 30rpx;
        padding: 20rpx 30rpx;

        .icon {
            width: 80rpx;
            height: 80rpx;
        }

        .info-box {
            flex: 1;
            display: inline-flex;
            flex-direction: column;
            row-gap: 4rpx;       
            color: #4B5563;     

            .desc {
                color: #9CA3AF;
                font-size: 24rpx;
            }
        }
    }
}

:deep(.u-swipe-action-item__right){
    align-items: center !important;
}
</style>